import { type CSSProperties } from 'react';

import { Button, Tooltip } from 'antd';

import type { ButtonProps, TooltipProps } from 'antd';

// 定义 Props 接口，继承自 Ant Design 的 ButtonProps，但排除 icon 和 iconPosition
interface Props extends Omit<ButtonProps, 'icon' | 'iconPosition'> {
	children?: React.ReactNode; // 子节点
	className?: string; // 自定义样式类
	icon?: string; // 图标名称
	style?: CSSProperties; // 样式
	tooltipContent?: string; // 提示内容
	tooltipPlacement?: TooltipProps['placement']; // 提示位置
	triggerParent?: boolean; // 是否在父元素上触发提示
	zIndex?: number; // 层级
}

/**
 * 动态计算 class
 * @param className - 初始 class 名称
 * @returns 计算后的 class 名称
 */
const computeClass = (className: string) => {
	let clsStr = className;

	if (!clsStr.includes('h-')) {
		clsStr += ' h-36px';
	}

	if (!clsStr.includes('text-')) {
		clsStr += ' text-icon';
	}

	return clsStr;
};

/**
 * ButtonIcon 组件
 * 用于生成带图标的按钮，支持自定义样式和提示
 * @param children - 子节点
 * @param className - 自定义样式类
 * @param icon - 图标名称
 * @param style - 样式
 * @param tooltipContent - 提示内容
 * @param tooltipPlacement - 提示位置
 * @param triggerParent - 是否在父元素上触发提示
 * @param zIndex - 层级
 * @param rest - 其他属性
 */
const ButtonIcon = ({
	children,
	className = 'h-36px text-icon',
	icon,
	style,
	tooltipContent,
	tooltipPlacement = 'bottom',
	triggerParent,
	zIndex = 98,
	...rest
}: Props) => {
	const cls = computeClass(className);

	/**
	 * 获取提示框的容器
	 * @param triggerNode - 触发节点
	 * @returns 提示框的容器节点
	 */
	function getPopupContainer(triggerNode: HTMLElement) {
		return triggerParent ? triggerNode.parentElement! : document.body;
	}

	return (
		<Tooltip
			getPopupContainer={getPopupContainer}
			placement={tooltipPlacement}
			title={tooltipContent}
			zIndex={zIndex}
		>
			<Button className={cls} type="text" {...rest}>
				<div className="flex-center gap-8px">
					{children || <SvgIcon icon={icon} style={style} />}
				</div>
			</Button>
		</Tooltip>
	);
};

// 示例用法
// <ButtonIcon icon="home" tooltipContent="Home" />
export default ButtonIcon;
